<template>
  <div class="result-content">
    <div class="result-button" v-if="isReport">
      <span @click="handleCheckAllChange">全选</span
      ><span @click="exportDoc">导出</span>
    </div>
    <ul class="result-list">
      <li v-for="(item, index) in resultList" :key="index">
        <el-checkbox
          v-model="item.checked"
          class="result-check"
          v-show="isReport"
        ></el-checkbox>
        <div class="result-con">
          <p class="title" :title="item.title">
            <span @click="changeDetail(item.id)" v-html="item.title"></span>
            <span class="translate-btn" @click="translate(item, index)"
              >译</span
            >
          </p>
          <p class="text" v-html="item.text"></p>
          <div class="footer">
            <p>{{ item.source }}&nbsp;&nbsp;{{ item.pubdate }}</p>
            <p class="btn-p">
              <template>
                <span class="tag" v-for="(ite, j) in item.tags" :key="j">{{
                  ite
                }}</span>
              </template>
            </p>
          </div>
        </div>
      </li>
    </ul>
    <el-pagination
      v-if="resultList.length > 0"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page.sync="pageNum"
      @current-change="getOneCurrentPage"
      class="el-pagination"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resultList: [],
      total: 0,
      pageSize: 5, // 每页展示条数
      pageNum: 1,
    };
  },
  props: {
    activeIndex: {
      type: String,
      default: "1",
    },
    keyword: {
      type: String,
      default: null,
    },
    isReport: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    let keyword = this.$route.params.keyword
    if (keyword) {
      this.init(keyword)
    } else {
      this.init();
    }
  },
  methods: {
    init(keyword) {
      this.resultList = [];
      this.$get(this.$Url.policy.list, {
        ipi: this.pageNum,
        ips: this.pageSize,
        type: this.activeIndex,
        keyword,
      }).then((res) => {
        let data = res.data;
        if (data) {
          this.pageNum = data.pageNum;
          this.pageSize = data.pageSize;
          this.total = data.total;
          data.result.map((item) => {
            this.resultList = [
              ...this.resultList,
              {
                ...item,
                checked: false,
              },
            ];
          });
        }
      });
    },
    translate(item, index) {
      // if (index >= 2) {
      //   return;
      // }
      // if (!item.isTrans) {
      //   item.isTrans = true;
      // } else {
      //   item.isTrans = false;
      // }
    },
    getOneCurrentPage(val) {
      this.pageNum = val;
      this.init(this.keyword === "" ? null : this.keyword);
    },
    changeDetail(id) {
      this.$router.push({ name: "ConsultDetail", query: { id: id } });
    },
    handleCheckAllChange() {
      const checked = this.resultList.filter((item) => item.checked);
      if (checked.length === this.resultList.length) {
        this.resultList.map((item) => {
          item.checked = false;
        });
      } else {
        this.resultList.map((item) => {
          item.checked = true;
        });
      }
      this.resultList = this.resultList;
    },
    exportDoc() {
      const checked = this.resultList.filter((item) => item.checked);
      let ids = checked.map((item) => {
        return item.id;
      });
      this.$axios
        .post(this.$Url.policy.export, { ids }, { responseType: "blob" })
        .then((res) => {
          let filename =
            res.headers["content-disposition"].split(";")[1].split("=")[1] ||
            "";
          const aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = window.URL.createObjectURL(res.data);
          aLink.setAttribute("download", filename);
          document.body.appendChild(aLink);
          aLink.click();
          aLink.remove();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.result-content {
  position: relative;
  width: 100%;
  padding: 10px 24px;
  background-color: #fff;
  .result-button {
    span {
      display: inline-block;
      width: 56px;
      height: 24px;
      color: $mainColor;
      border: 1px solid $mainColor;
      border-radius: 4px;
      text-align: center;
      line-height: 24px;
      margin-right: 10px;
      cursor: default;
      &:hover {
        background: $mainColor;
        color: #fff;
      }
    }
  }
  .result-list {
    text-align: left;
    list-style: none;
    li {
      display: block;
      padding: 10px;
      border-bottom: 1px solid #d4d3f3;
      display: flex;
      // &:last-of-type {
      //   border-bottom: 0;
      // }
      .result-check {
        padding-top: 30px;
      }
      .result-con {
        flex: 1;
        margin-left: 10px;
        .title {
          display: inline-block;
          padding: 14px 0;
          border-bottom: 0;
          text-decoration: none;
          font-weight: 600;
          font-size: 14px !important;
          color: #241c75;
          span {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
            ::v-deep em {
              color: #ff3c00;
            }
          }
          .translate-btn {
            position: relative;
            height: 22px;
            line-height: 20px;
            padding: 0 7px;
            border-radius: 4px;
            border: 1px solid #4f63c8;
            margin-left: 10px;
            text-align: center;
            font-size: 14px;
            color: #4f63c8;
            background-color: #fff;
            cursor: pointer;
            outline: 0;
            &:hover {
              color: #fff;
              background-color: #4f63c8;
            }
          }
        }
        .text {
          line-height: 26px;
          margin-bottom: 16px;
          font-size: 14px;
          color: #7674a3;
          ::v-deep em {
            color: #ff3c00;
          }
        }
        .footer {
          position: relative;
          p {
            margin-bottom: 0;
            &:nth-child(1) {
              font-size: 14px;
              color: #b8c2d7;
            }
          }
        }
      }
    }
    .btn-p {
      position: absolute;
      top: -10px;
      right: 0;
      span {
        display: inline-block;
        height: 28px;
        line-height: 28px;
        padding: 0 10px;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
        color: #7775da;
        background-color: #ececf4;
      }
    }
  }
  .el-pagination {
    margin-top: 10px;
    text-align: center;
  }
}

.btn-p span.sentiment.normal {
  color: #41b3a2;
  background-color: #e4f6f3;
}
.btn-p span.sentiment.neutral {
  color: #efa752;
  background-color: #fef0df;
}
.btn-p span.sentiment.negative {
  color: #d96f6f;
  background-color: #f8e8e8;
}
</style>